<!--
@author pan
@createDate 2022/02 2022/2/28 02:41
-->
<script setup lang="ts" name="JsonFormPage">
import { ContentTag, JsonForm } from 'components/index'
import JsonFormInput from 'components/json-form/JsonFormInput.vue'
import JsonFormSelect from 'components/json-form/JsonFormSelect.vue'
import { useRoute } from 'vue-router'
import { ref, shallowRef } from 'vue'
import { JsonFormItemType } from 'components/json-form/JsonForm.type'

const $route = useRoute()
const formData = ref({
  name: '张三',
})
const formItemArr = ref<JsonFormItemType[]>([
  {
    labelName: '姓名',
    fieldProp: 'name',
    component: shallowRef(JsonFormInput),
    rules: [{ required: true, message: '填个姓名' }],
  },
  {
    labelName: '爱好',
    fieldProp: 'hobby',
    placeholder: '请选择',
    component: shallowRef(JsonFormSelect),
    customProp: {
      options: [
        { code: 1, label: '篮球' },
        { code: 2, label: '足球' },
      ],
    },
  },
])

const jsonFormRef = ref()

function onSetErrorMsg() {
  jsonFormRef.value.fitCustomErrorMsg('name', '姓名错误,请重新输入!')
}
function onValidate() {
  jsonFormRef.value.validate()
}
function onClearValidate() {
  jsonFormRef.value.clearValidate('name')
}
</script>

<template>
  <ContentTag>
    <el-card>
      <JsonForm
        ref="jsonFormRef"
        :form-data="formData"
        :item-arr="formItemArr"
      ></JsonForm>
      <button @click="onSetErrorMsg">填充错误信息</button>
      <button @click="onValidate">表单验证</button>
      <button @click="onClearValidate">清除表单错误</button>
    </el-card>
  </ContentTag>
</template>

<style lang="scss" scoped></style>
